import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

import { LayerFormsService } from '../layer-forms.service';
import { WFSLayer, WMSLayer, WMSLayerParams, JSONXYLayer, JSONLayer } from '../../layer-value.model';

@Component({
  selector: 'ege-layer-forms-configure',
  templateUrl: './layer-forms-configure.component.html',
  styleUrls: ['./layer-forms-configure.component.scss']
})
export class LayerFormsConfigureComponent implements OnInit {

  type: string;
  forms: FormGroup;
  loading: boolean;

  constructor(
    private router: Router,
    private activatedRoute: ActivatedRoute,
    private fb: FormBuilder,
    private layerFormsService: LayerFormsService
  ) { }

  ngOnInit() {
    const { type } = this.layerFormsService.forms;
    this.type = type;
    this.loading = false;
    this.formBuilder(type);
  }

  submitForm(event: Event): void {
    this.markAsDirty(this.forms);

    if(this.forms.valid) {
      this.loading = true;
      this.layerFormsService.addValues({ options: this.forms.value });
      this.router.navigate(['../other'], { relativeTo: this.activatedRoute });
    }
  }

  getFormControl(name: string, childName?: string) {
    let control = this.forms.controls[ name ];
    if(childName) {
      control = (control as FormGroup).controls[ childName ];
    }
    return control;
  }

  goPreviousStep(): void {
    this.router.navigate(['../info'], { relativeTo: this.activatedRoute });
  }

  private markAsDirty(forms: FormGroup): void {
    for (const i in forms.controls) {
      if(forms.controls[ i ] instanceof FormGroup) {
        this.markAsDirty(forms.controls[ i ] as FormGroup);
      } else {
        forms.controls[ i ].markAsDirty();
      }
    }
  }

  private formBuilder(type: string): void {
    switch(type) {
      case 'WFS': {
        this.createWfsForm();
        break;
      }
      case 'WMS': {
        this.createWmsForm();
        break;
      }
      case 'JSONXY': {
        this.createJsonXYForm();
        break;
      }
      case 'JSON': {
        this.createJsonForm();
        break;
      }
    }
  }

  private createWfsForm(): void {
    const { host, name, namespace, namespaceURI, geometryName, srsName } = (this.layerFormsService.forms.options || {}) as WFSLayer;
    this.forms = this.fb.group({
      host          : [ host         || '', [ Validators.required ] ],
      name          : [ name         || '', [ Validators.required ] ],
      namespace     : [ namespace    || '', [ Validators.required ] ],
      namespaceURI  : [ namespaceURI || '', [ Validators.required ] ],
      geometryName  : [ geometryName || '', [ Validators.required ] ],
      srsName       : [ srsName      || '', [ Validators.required ] ],
    });
  }

  private createWmsForm(): void {
    const { serverType, params, projection, url } = (this.layerFormsService.forms.options || {}) as WMSLayer;
    const { LAYERS, STYLES } = (params || {}) as WMSLayerParams;
    this.forms = this.fb.group({
      serverType          : [ serverType || 'geoserver', [ Validators.required ] ],
      params              : this.fb.group({
        LAYERS            : [ LAYERS     || '', [ Validators.required ] ],
        STYLES            : [ STYLES     || '' ]
      }),
      projection          : [ projection || '', [ Validators.required ] ],
      url                 : [ url        || '', [ Validators.required ] ],
    });
  }

  private createJsonXYForm(): void {
    const { url, x, y, projection } = (this.layerFormsService.forms.options || {}) as JSONXYLayer;
    this.forms = this.fb.group({
      url                 : [ url        || '', [ Validators.required ] ],
      x                   : [ x          || '', [ Validators.required ] ],
      y                   : [ y          || '', [ Validators.required ] ],
      projection          : [ projection || '', [ Validators.required ] ]
    });
  }

  private createJsonForm(): void {
    const { url } = (this.layerFormsService.forms.options || {}) as JSONLayer;
    this.forms = this.fb.group({
      url                 : [ url || '', [ Validators.required ] ]
    });
  }

}
